<template>
  <div>
    
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        
        <el-form-item label="用工方式" prop="type">
            <el-button @click="xm">按项目收费</el-button>
            <el-button @click="as">按时收费</el-button>
            <el-button @click="asd">回到首页</el-button>
        </el-form-item>
        
        <el-form-item label="标题" prop="title">
            <el-input type="text" show-word-limit maxlength="30" v-model="ruleForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="desc">
            <el-input type="textarea" show-word-limit maxlength="100" v-model="ruleForm.desc" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型" prop="label" v-show="flag">
            <el-tabs :tab-position="tabPosition"  style="margin-bottom: 20px;">
            <el-tab-pane :label="i.name" v-for="(i,j) in list" :key="j">
                <div v-for="(x,p) in i.son" :key="p">{{x.name}}<div v-for="(o,y) in x.son" :key="y"><el-button @click="huo_label(i.name,x.name,o.name)">{{o.name}}</el-button></div> </div>
            </el-tab-pane>
            </el-tabs>
        </el-form-item>

        <el-form-item label="标签选择">
            <el-input v-model="ruleForm.label"></el-input>
            <el-button type="primary" @click="but_label">请选择标签</el-button>
        </el-form-item>

        <el-form-item label="需求预算" prop="money" v-show="xiangmu">
            <el-input type="text" v-model="ruleForm.money" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="每小时金额" prop="money" v-show="shijian">
            <el-input type="text" v-model="ruleForm.money" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="预留手机号" prop="mobile">
            <el-input type="text" v-model="ruleForm.mobile" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    data(){
        return{
            xiangmu:true,
            shijian:false,
            flag:false,
            ruleForm:{
                type:1,
                title:"",
                desc:"",
                label:"",
                money:"",
                mobile:"",
                user_id:localStorage.getItem('user_id'),
            },
            list:[],
            tabPosition: 'left'
        }
    },
    methods:{
        submitForm(){
            
            this.axios.post('/add_server',this.ruleForm).then(resp=>{
                console.log(resp)
                if(resp.data.code == 200){
                    alert(resp.data.msg)
                    this.$router.push('/home')
                }else{
                    alert(resp.data.msg)
                }
            })
        },
        asd(){
            this.$router.push('/home')
        },
        as(){
            this.shijian = true
            this.xiangmu = false
            this.ruleForm.type = 2
        },
        xm(){
            this.xiangmu = true,
            this.shijian = false
            this.ruleForm.type = 1
        },
        but_label(){
            this.flag = true
        },
        huo_label(name,tname,sname){
            this.ruleForm.label = name + "-" +  tname + "-" + sname 
            this.flag = false
        },
        get_labels(){
            this.axios.get('/get_labels').then(resp=>{
                console.log(resp)
                this.list = resp.data.data
            })
        }
    },
    mounted(){
        this.get_labels()
    }
}
</script>

<style>

</style>